@apolitical/component-library 0.0.4-beta.1 → 0.0.4-beta.11

package/styles/variables/colors/_colors.scss

@@ -0,0 +1,64 @@
+// The default colours are defined here and referenced in `theme.scss`, which is what is used across the app.
+// This lets us use a meaningful name across the platform, such as `background` or `title`, rather than use a colour name,
+// like b900, which is likely to change in the future, but still have a clear consistency with Figma, which uses colour
+// names.
+
+$default-colors: (
+  'white': rgb(255 255 255 / 100%),
+  'black': rgb(0 0 0 / 100%),
+  'sand': rgb(252 250 243 / 100%),
+
+  'b50': rgb(248 247 255 / 100%),
+  'b100': rgb(222 220 250 / 100%),
+  'b200': rgb(197 194 245 / 100%),
+  'b300': rgb(175 171 239 / 100%),
+  'b500': rgb(124 114 225 / 100%),
+  'b600': rgb(101 89 212 / 100%),
+  'b700': rgb(79 67 186 / 100%),
+  'b800': rgb(57 45 135 / 100%),
+  'b900': rgb(33 24 77 / 100%),
+
+  'g50': rgb(235 250 246 / 100%),
+  'g100': rgb(195 240 228 / 100%),
+  'g300': rgb(124 220 197 / 100%),
+  'g600': rgb(43 137 117 / 100%),
+  'g700': rgb(28 104 88 / 100%),
+  'g900': rgb(10 38 33 / 100%),
+
+  'n50': rgb(240 245 255 / 100%),
+  'n100': rgb(215 224 239 / 100%),
+  'n200': rgb(192 203 223 / 100%),
+  'n500': rgb(117 131 160 / 100%),
+  'n600': rgb(89 101 128 / 100%),
+  'n700': rgb(64 74 97 / 100%),
+  'n800': rgb(42 49 65 / 100%),
+  'n900': rgb(21 25 33 / 100%),
+
+  'p50': rgb(255 242 255 / 100%),
+  'p100': rgb(238 200 237 / 100%),
+  'p300': rgb(203 130 197 / 100%),
+  'p500': rgb(166 55 152 / 100%),
+  'p900': rgb(66 1 55 / 100%),
+
+  'y50': rgb(255 248 232 / 100%),
+  'y100': rgb(255 238 193 / 100%),
+  'y300': rgb(255 230 139 / 100%),
+  'y700': rgb(122 81 5 / 100%),
+  'y900': rgb(48 29 0 / 100%),
+
+  'error50': rgb(255 242 242 / 100%),
+  'error600': rgb(195 65 65 / 100%),
+  'error700': rgb(155 36 36 / 100%),
+
+  'info50': rgb(240 245 247 / 100%),
+  'info500': rgb(30 117 166 / 100%),
+  'info600': rgb(20 95 139 / 100%),
+
+  'success50': rgb(235 247 239 / 100%),
+  'success500': rgb(60 124 82 / 100%),
+  'success600': rgb(38 103 60 / 100%),
+
+  'warning50': rgb(255 242 230 / 100%),
+  'warning500': rgb(220 121 29 / 100%),
+  'warning700': rgb(137 71 11 / 100%),
+);

package/styles/variables/colors/_index.scss

@@ -0,0 +1 @@
+@import 'theme';

package/styles/variables/colors/_theme.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@import 'colors';
+
+
+$c: $default-colors;
+$theme: (
+  default_focus: map.get($c, 'b100'),
+
+  background: map.get($c, 'white'),
+  
+  title: map.get($c, 'n900'),
+  subtitle: map.get($c, 'n800'),
+  text: map.get($c, 'n900'),
+
+  link: map.get($c, 'b700'),
+  link_hover: map.get($c, 'b800'),
+
+  button_primary: map.get($c, 'white'),
+  button_primary_bg: map.get($c, 'b700'),
+  button_primary_bg_hover: map.get($c, 'b500'),
+  button_primary_bg_active: map.get($c, 'b800'),
+  button_primary_bg_focus: map.get($c, 'b600'),
+  button_primary_bg_disabled: map.get($c, 'b700'),
+  button_primary_destructive: map.get($c, 'white'),
+  button_primary_destructive_bg: map.get($c, 'error600'),
+  button_primary_destructive_bg_hover: map.get($c, 'error700'),
+  button_primary_destructive_box-shadow: map.get($c, 'error50'),
+
+  button_secondary: map.get($c, 'b700'),
+  button_secondary_focus: map.get($c, 'white'),
+  button_secondary_muted: map.get($c, 'n600'),
+  button_secondary_muted_hover: map.get($c, 'b700'),
+  button_secondary_disabled: map.get($c, 'b700'),
+  button_secondary_bg: map.get($c, 'white'),
+  button_secondary_bg_hover: map.get($c, 'b200'),
+  button_secondary_bg_focus: map.get($c, 'b600'),
+  button_secondary_bg_active: map.get($c, 'b800'),
+  button_secondary_bg_muted: map.get($c, 'white'),
+  button_secondary_bg_disabled: map.get($c, 'white'),
+  button_secondary_border: map.get($c, 'b700'),
+  button_secondary_border_focus: transparent,
+  button_secondary_border_muted: map.get($c, 'n200'),
+  button_secondary_border_disabled: map.get($c, 'b700'),
+
+  button_tertiary: map.get($c, 'b700'),
+  button_tertiary_hover: map.get($c, 'b500'),
+  button_tertiary_active: map.get($c, 'b800'),
+  button_tertiary_muted: map.get($c, 'n600'),
+  button_tertiary_muted_hover: map.get($c, 'b500'),
+  button_tertiary_disabled: map.get($c, 'b700'),
+  button_tertiary_bg: none,
+  button_tertiary_disabled_bg: none,
+  button_tertiary_text-decoration: transparent,
+  button_tertiary_disabled_text-decoration: transparent,
+
+
+  blockquote: map.get($c, 'n900'),
+  'blockquote_border': map.get($c, 'g300'),
+
+  divider: map.get($c, 'n100'),
+);
+

package/styles/variables/sizes/_common.scss

@@ -0,0 +1,3 @@
+@import './../../functions';
+
+$outline: 0 0 0 px-to-rem(4);

package/styles/variables/sizes/_index.scss

@@ -0,0 +1 @@
+@import 'common';