CodePen Embed - CodyFrame - Color Themes

Live

This Pen is owned by CodyHouse on CodePen.

See more by @codyhouse on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":1,\"theme\":\"twilight\",\"id\":\"LKYVOa\",\"auto_save\":true},\"hashid\":\"LKYVOa\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://unpkg.com/codyhouse-framework/main/assets/css/style.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/codyhouse/pen/oNxLjqp.scss\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"// 💬 A look at CodyFrame's mixins \\n// 🔗 https://codyhouse.co/ds/docs/framework/mixins\\n\\n// --------------------------------\\n\\n// Typography\\n\\n// --------------------------------\\n\\n// edit font rendering -> tip: use for light text on dark backgrounds\\n@mixin fontSmooth {\\n  -webkit-font-smoothing: antialiased;\\n  -moz-osx-font-smoothing: grayscale;\\n}\\n\\n// crop top space on text elements - caused by line height\\n@mixin lhCrop($line-height, $capital-letter: 1) {\\n  &::before {\\n    content: '';\\n    display: block;\\n    height: 0;\\n    width: 0;\\n    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);\\n  }\\n}\\n\\n// edit text unit on a component level\\n@mixin textUnit($text-unit) {\\n  --text-unit: #{$text-unit};\\n  font-size: var(--text-unit);\\n}\\n\\n// --------------------------------\\n\\n// Spacing\\n\\n// --------------------------------\\n\\n// edit space unit on a component level\\n@mixin spaceUnit($space-unit) {\\n  --space-unit:  #{$space-unit};\\n}\\n\\n// --------------------------------\\n\\n// Reset\\n\\n// --------------------------------\\n\\n// reset user agent style\\n@mixin reset {\\n  background-color: transparent;\\n  padding: 0;\\n  border: 0;\\n  border-radius: 0;\\n  color: inherit;\\n  line-height: inherit;\\n  appearance: none;\\n}\\n\\n// --------------------------------\\n\\n// Colors\\n\\n// --------------------------------\\n\\n// define HSL color variable\\n@mixin defineColorHSL($color, $hue, $saturation, $lightness) {\\n  #{$color}: unquote(\\\"hsl(#{$hue}, #{$saturation}, #{$lightness})\\\");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};\\n}\\n\\n// return color with different opacity value\\n@function alpha($color, $opacity) {\\n  $color: str-replace($color, 'var(');\\n  $color: str-replace($color, ')');\\n  $color-h: var(#{$color+'-h'});\\n  $color-s: var(#{$color+'-s'});\\n  $color-l: var(#{$color+'-l'});\\n  @return hsla($color-h, $color-s, $color-l, $opacity);\\n}\\n\\n// return color with different lightness value\\n@function lightness($color, $lightnessMultiplier) {\\n  $color: str-replace($color, 'var(');\\n  $color: str-replace($color, ')');\\n  $color-h: var(#{$color+'-h'});\\n  $color-s: var(#{$color+'-s'});\\n  $color-l: var(#{$color+'-l'});\\n  @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));\\n}\\n\\n// modify color HSLA values\\n@function adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1) {\\n  $color: str-replace($color, 'var(');\\n  $color: str-replace($color, ')');\\n  $color-h: var(#{$color+'-h'});\\n  $color-s: var(#{$color+'-s'});\\n  $color-l: var(#{$color+'-l'});\\n  @return hsla(calc(#{$color-h} * #{$hueMultiplier}), calc(#{$color-s} * #{$saturationMultiplier}), calc(#{$color-l} * #{$lightnessMultiplier}), $opacity);\\n}\\n\\n// replace substring with another string\\n// credits: https://css-tricks.com/snippets/sass/str-replace-function/\\n@function str-replace($string, $search, $replace: '') {\\n  $index: str-index($string, $search);\\n  @if $index {\\n    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\\n  }\\n  @return $string;\\n}\\n\\n// --------------------------------\\n\\n// Accessibility\\n\\n// --------------------------------\\n\\n// hide - content made available only to screen readers\\n@mixin srHide {\\n  position: absolute;\\n  clip: rect(1px, 1px, 1px, 1px);\\n  clip-path: inset(50%);\\n}\\n\\n// show\\n@mixin srShow {\\n  position: static;\\n  clip: auto;\\n  clip-path: none;\\n}\\n\\n// --------------------------------\\n\\n// Grid & Layout\\n\\n// --------------------------------\\n\\n$grid-columns: 12 !default;\\n\\n// used to round width to a number with 2 decimal places - used for IE fallback\\n@function round-width ($i) {\\n  $width : floor(100% * $i * 100/ $grid-columns) / 100;\\n  @return $width;\\n}\\n\\n// used to create the auto-size columns of the grid system (.col class)\\n@mixin autoSizedColumn {\\n  flex-grow: 1;\\n  flex-basis: 0;\\n  max-width: 100%;\\n}\\n\\n// CSS Grid Layout fallback\\n@mixin gridFallback($gap: null) {\\n  display: flex;\\n  flex-wrap: wrap;\\n  @if( $gap == null ) {\\n    $gap: var(--space-md);\\n  }\\n\\n  margin: calc(#{$gap} * -1) 0 0 calc(#{$gap} * -1);\\n\\n  > * {\\n    padding: #{$gap} 0 0 #{$gap};\\n    background-clip: content-box;\\n  }\\n\\n  @supports (grid-area: auto) {\\n    margin: 0;\\n\\n    > * {\\n      padding: 0;\\n      max-width: none!important;\\n    }\\n  }\\n}\\n\\n@mixin column($width) {\\n  @if unit($width) != '%' {\\n    $width: $width * 100%;\\n  }\\n  flex-basis: #{$width};\\n  max-width: #{$width};\\n}\\n\\n// --------------------------------\\n\\n// CSS Triangle\\n\\n// --------------------------------\\n\\n@mixin triangle ($direction: up, $width: 12px, $color: red) {\\n  width: 0;\\n  height: 0;\\n  border: $width solid transparent;\\n\\n  @if( $direction == left ) {\\n    border-right-color: $color;\\n  } @else if( $direction == right ) {\\n    border-left-color: $color;\\n  } @else if( $direction == down ) {\\n    border-top-color: $color;\\n  } @else {\\n    border-bottom-color: $color;\\n  }\\n}\\n\\n// --------------------------------\\n\\n// Breakpoints\\n\\n// --------------------------------\\n\\n$breakpoints: (\\n  xs: 32rem, // ~512px\\n  sm: 48rem, // ~768px\\n  md: 64rem, // ~1024px\\n  lg: 80rem, // ~1280px\\n  xl: 90rem  // ~1440px\\n) !default;\\n\\n@mixin breakpoint($breakpoint, $logic: false) {\\n  @if( $logic ) {\\n    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }\\n  } @else {\\n    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }\\n  }\\n}\"}],\"tags\":[],\"id\":36803311,\"user_id\":148866,\"html\":\"\\n<div class=\\\"padding-y-md bg-darker\\\" data-theme=\\\"default\\\">\\n\\t<div class=\\\"container max-width-sm\\\">\\n\\t\\t<div class=\\\"padding-md radius-lg shadow-sm bg-dark\\\">\\n\\t\\t\\t<div class=\\\"padding-md radius-lg shadow-md bg\\\">\\n\\t\\t\\t\\t<div class=\\\"grid gap-xs padding-bottom-sm\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"flex flex-center col-6 col-3@sm height-md radius-md bg-darker\\\">\\n\\t\\t\\t\\t\\t\\t<span class=\\\"cd-demo-font text-xs\\\">Bg Darker</span>\\n\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t<div class=\\\"flex flex-center col-6 col-3@sm height-md radius-md bg-dark\\\">\\n\\t\\t\\t\\t\\t\\t<span class=\\\"cd-demo-font text-xs\\\">Bg Dark</span>\\n\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t<div class=\\\"flex flex-center col-6 col-3@sm height-md radius-md bg-light\\\">\\n\\t\\t\\t\\t\\t\\t<span class=\\\"cd-demo-font text-xs\\\">Bg Light</span>\\n\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t<div class=\\\"flex flex-center col-6 col-3@sm height-md radius-md bg-lighter\\\">\\n\\t\\t\\t\\t\\t\\t<span class=\\\"cd-demo-font text-xs\\\">Bg Lighter</span>\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"margin-bottom-sm\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"text-sm\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"grid gap-xxxs\\\">\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"color-contrast-lower margin-right-sm\\\">Color Contrast Lower</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bg-contrast-lower flex-grow\\\" style=\\\"height: 1px;\\\"></div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"color-contrast-low margin-right-sm\\\">Color Contrast Low</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bg-contrast-low flex-grow\\\" style=\\\"height: 1px;\\\"></div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"color-contrast-medium margin-right-sm\\\">Color Contrast Medium</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bg-contrast-medium flex-grow\\\" style=\\\"height: 1px;\\\"></div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"color-contrast-high margin-right-sm\\\">Color Contrast High</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bg-contrast-high flex-grow\\\" style=\\\"height: 1px;\\\"></div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"color-contrast-higher margin-right-sm\\\">Color Contrast Higher</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bg-contrast-higher flex-grow\\\" style=\\\"height: 1px;\\\"></div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<ul class=\\\"flex flex-wrap gap-xxs padding-bottom-sm\\\">\\n\\t\\t\\t\\t\\t<li><button class=\\\"btn btn--primary\\\">Button</button></li>\\n\\t\\t\\t\\t\\t<li><button class=\\\"btn btn--accent\\\">Button</button></li>\\n\\t\\t\\t\\t\\t<li><button class=\\\"btn btn--subtle\\\">Button</button></li>\\n\\t\\t\\t\\t\\t<li class=\\\"flex-grow\\\"><input class=\\\"form-control width-100%\\\" type=\\\"text\\\" placeholder=\\\"Input\\\"></li>\\n\\t\\t\\t\\t</ul>\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t<div class=\\\"padding-md radius-lg shadow-lg bg-light\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"padding-md radius-lg shadow-xl bg-lighter\\\" style=\\\"padding-bottom: 50%;\\\">\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t</div>\\n\\t\\t\\t</div>\\n\\t\\t</div>\\n\\t</div>\\n</div>\",\"css\":\"\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-06-10T21:44:30.000Z\",\"updated_at\":\"2021-09-17T15:50:49.000Z\",\"title\":\"CodyFrame - Color Themes\",\"description\":\"\",\"slug_hash\":\"LKYVOa\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"515efc2793bb9bfd1de7403d3a50cc10\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":30373098,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"cpid\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY4MDA4ODc5MH0.oSzCiVejc7MrQs7FswfurUSRkzG2aF5wPodGgADvid0","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}