Class: KozenetUi::Theme::Tokens

Inherits:
Object
  • Object
show all
Defined in:
lib/kozenet_ui/theme/tokens.rb

Overview

Design tokens for the Kozenet UI system

Constant Summary collapse

SPACING =

Spacing scale (in rem)

{
  xs: "0.25rem",   # 4px
  sm: "0.5rem",    # 8px
  md: "1rem",      # 16px
  lg: "1.5rem",    # 24px
  xl: "2rem",      # 32px
  "2xl": "3rem",   # 48px
  "3xl": "4rem"    # 64px
}.freeze
RADIUS =

Border radius (Apple-style rounded)

{
  sm: "12px",
  md: "16px",
  lg: "20px",
  xl: "24px",
  "2xl": "28px",
  full: "9999px"
}.freeze
FONT_SIZE =

Typography scale

{
  xs: "0.65rem",    # 10.4px
  sm: "0.75rem",    # 12px
  base: "0.875rem", # 14px
  lg: "1rem",       # 16px
  xl: "1.25rem",    # 20px
  "2xl": "1.5rem",  # 24px
  "3xl": "2rem"     # 32px
}.freeze
FONT_WEIGHT = 
{
  normal: "400",
  medium: "500",
  semibold: "600",
  bold: "700"
}.freeze
SHADOW =

Shadows for depth effects

{
  sm: "0 1px 2px rgba(0,0,0,.05), 0 2px 6px -2px rgba(0,0,0,.08)",
  md: "0 4px 14px -6px rgba(0,0,0,.25)",
  lg: "0 10px 30px -12px rgba(0,0,0,.45)",
  xl: "0 20px 60px -26px rgba(0,0,0,.28)"
}.freeze
TRANSITION =

Transitions

{
  fast: "0.15s ease",
  base: "0.25s ease",
  slow: "0.35s ease"
}.freeze
Z_INDEX =

Z-index layers

{
  dropdown: "50",
  sticky: "60",
  modal: "70",
  popover: "80",
  toast: "90"
}.freeze

Class Method Summary collapse

Class Method Details

.to_css_variables ⇒ Object

rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
# File 'lib/kozenet_ui/theme/tokens.rb', line 72

def to_css_variables
  variables = []

  # Spacing
  SPACING.each { |key, value| variables << "--kz-spacing-#{key}: #{value};" }

  # Radius
  RADIUS.each { |key, value| variables << "--kz-radius-#{key}: #{value};" }

  # Typography
  FONT_SIZE.each { |key, value| variables << "--kz-font-size-#{key}: #{value};" }
  FONT_WEIGHT.each { |key, value| variables << "--kz-font-weight-#{key}: #{value};" }

  # Shadows
  SHADOW.each { |key, value| variables << "--kz-shadow-#{key}: #{value};" }

  # Transitions
  TRANSITION.each { |key, value| variables << "--kz-transition-#{key}: #{value};" }

  # Z-index
  Z_INDEX.each { |key, value| variables << "--kz-z-#{key}: #{value};" }

  variables.join("\n          ")
end