Class: UtilityPalettes::Outputs

Inherits:
Object
  • Object
show all
Defined in:
lib/utility_palettes/outputs.rb

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.css(filename, output_palettes) ⇒ Object 



84
85
86
87
88
89
90
91
92
93
94
 
# File 'lib/utility_palettes/outputs.rb', line 84

def self.css(filename, output_palettes)
  content = ":root {\n\t#{output_palettes.collect { |label, hex| "--#{label}: #{hex};" }.join("\n\t")}\n}"
  filepath = "#{filename}.css"

  # Create directory if it doesn't exist
  FileUtils.mkdir_p(File.dirname(filepath))
  File.write(filepath, content)

  puts 'Exporting utility palettes CSS...'
  true
end

.generate(generated_palettes) ⇒ Object 



5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
# File 'lib/utility_palettes/outputs.rb', line 5

def self.generate(generated_palettes)
  output_format = UtilityPalettes.configuration.output_format.to_s.downcase.presence
  output_palettes = {}

  generated_palettes.each do |label, colourize_colour|
    case output_format
    when 'rgb'
      values = colourize_colour.rgb.values
    when 'hsl'
      values = colourize_colour.hsl.values
      values[1] = self.append_percentage(values[1])
      values[2] = self.append_percentage(values[2])
    when 'hsv'
      values = colourize_colour.hsv.values
      values[1] = self.append_percentage(values[1])
      values[2] = self.append_percentage(values[2])
    when 'hsb'
      values = colourize_colour.hsb.values
      values[1] = self.append_percentage(values[1])
      values[2] = self.append_percentage(values[2])
    when 'cmyk'
      values = colourize_colour.cmyk.values
      values[1] = self.append_percentage(values[1])
      values[2] = self.append_percentage(values[2])
      values[3] = self.append_percentage(values[3])
      output_format = 'device-cmyk'
    when 'cielab', 'lab'
      values = colourize_colour.cielab.values
      values[0] = self.append_percentage(values[0])
      output_format = 'lab'
    when 'cielch', 'lch'
      values = colourize_colour.cielch.values
      values[0] = self.append_percentage(values[0])
      output_format = 'lch'
    when 'hex'
      values = colourize_colour.hex
    else
      values = colourize_colour.rgb.values
      output_format = 'rgb'
    end

    case output_format
    when 'hex'
      values += (colourize_colour.alpha * 255).round.to_s(16).slice(0, 2).upcase if colourize_colour.alpha < 1.0
      output_palettes[label] = values
    else
      values << self.append_alpha(colourize_colour.alpha) if colourize_colour.alpha < 1.0
      output_palettes[label] = "#{output_format}(#{values.join(' ')})"
    end
  end

  # TODO: sort by non-ASCII so that -50 is before -100 -> `naturally` gem
  output_palettes.sort.to_h
end

.json(filename, output_palettes) ⇒ Object 



60
61
62
63
64
65
66
67
68
69
70
 
# File 'lib/utility_palettes/outputs.rb', line 60

def self.json(filename, output_palettes)
  content = JSON.pretty_generate(output_palettes)
  filepath = "#{filename}.json"

  # Create directory if it doesn't exist
  FileUtils.mkdir_p(File.dirname(filepath))
  File.write(filepath, content)

  puts 'Exporting utility palettes JSON...'
  true
end

.scss(filename, output_palettes) ⇒ Object 



72
73
74
75
76
77
78
79
80
81
82
 
# File 'lib/utility_palettes/outputs.rb', line 72

def self.scss(filename, output_palettes)
  content = output_palettes.collect { |label, hex| "$#{label}: #{hex};" }.join("\n")
  filepath = "#{filename}.scss"

  # Create directory if it doesn't exist
  FileUtils.mkdir_p(File.dirname(filepath))
  File.write(filepath, content)

  puts 'Exporting utility palettes SCSS...'
  true
end

Instance Method Details

#bespoke_property_variables ⇒ Object 



96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
# File 'lib/utility_palettes/outputs.rb', line 96

def bespoke_property_variables
  # const utilities = {
  #   bg: (value) => ({ 'background-color': value }),
  #   text: (value) => ({ 'color': value }),
  #   border: (value) => ({ 'border-color': value }),
  #   'border-t': (value) => ({ '--tw-border-opacity': 1, 'border-top-color': value }),
  #   'border-r': (value) => ({ '--tw-border-opacity': 1, 'border-right-color': value }),
  #   'border-b': (value) => ({ '--tw-border-opacity': 1, 'border-bottom-color': value }),
  #   'border-l': (value) => ({ '--tw-border-opacity': 1, 'border-left-color': value }),
  #   outline: (value) => ({ 'outline-color': value }),
  #   ring: (value) => ({ '--tw-ring-opacity': 1, '--tw-ring-color': value }),
  #   'ring-offset': (value) => ({ '--tw-ring-offset-color': value }),
  #   'shadow': (value) => ({ '--tw-shadow-color': value, '--tw-shadow': 'var(--tw-shadow-colored)' }),
  #   accent: (value) => ({ 'accent-color': value }),
  #   caret: (value) => ({ 'caret-color': value }),
  #   fill: (value) => ({ 'fill': value }),
  #   stroke: (value) => ({ 'stroke': value }),
  # };
end